<template>
    <div id="cont" class="padding">
        <div>
            <div class="album">
                <div class="scroll" :style="{transform:styleOfTransform}">
                    <div><img src="/static/images/合影.jpg" alt="合影"></div>
                    <div><img src="/static/images/hhzhl.jpg" alt="南湖大楼"></div>
                    <div><img src="/static/images/nanhuzonghelou.jpg" alt="南湖大楼"></div>
                </div>
                <div class="dot">
                    <span :style="{opacity: opa[0]}" @click="clickfunction(2)" class="selected"></span>
                    <span :style="{opacity: opa[1]}" @click="clickfunction(3)"></span>
                    <span :style="{opacity: opa[2]}" @click="clickfunction(1)"></span>
                </div>
            </div>

            <div class="welcome">
                欢迎来到蔡畅实验室！
            </div>
            <div class="guide">
                <div>
                    <div class="title">关于我们</div> 
                    <div class="intro">
                        本实验积极使用脑科学领域中常见的研究方法和工具来探索大脑认知和大脑紊乱的功能机制，这些方法包括频谱分析、时频分析、功能连接、信息论，所使用的常见工具包括EEGLAB、FieldTrip、BrainStorm、BrainNet和NutMeg等。重要的一点是，我们紧跟领域前沿和潮流，使用深度学习技术和动态脑网络进行更加深入的研究
                    </div>
                </div>
                <div>
                    <div class="title">更多信息</div>
                    <div class="module">
                        <div @click="$router.push({name: 'search'})">
                            <img src="/static/images/index/rengongzhinengdanao.svg" alt="研究">
                            <p>研究内容</p>
                        </div>
                        <div @click="$router.push({name: 'team'})">
                            <img src="/static/images/index/tuandui_1.svg" alt="成员">
                            <p>团队成员</p>
                        </div>
                        <div @click="$router.push({name: 'article'})">
                            <img src="/static/images/index/lunwentimu.svg" alt="论文">
                            <p>研究成果</p>
                        </div>
                        <div @click="$router.push({name: 'project'})">
                            <img src="/static/images/index/tuandui.svg" alt="项目">
                            <p>研究项目</p>
                        </div>                      
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default({
    name: 'cont',
    data: function(){
        return {
            currentSlide: 0,
            opa: [1,0.6,0.6],
            slideNum: 3,
            styleOfTransform: 'transformX(0)',
            intervalId: ''
        }
    },
    mounted(){
       this.intervalId =  window.setInterval(this.nextSlide, 5000)
    },
    methods:{
        adjustopacity: function(){
            for(let i=0;i<=this.slideNum;i++){
                if(this.currentSlide === i){
                    this.opa[i] = 1;
                }
                else{
                    this.opa[i] = 0.6;
                }
            }
        },
        nextSlide: function () {
            this.currentSlide = (this.currentSlide + 1) % this.slideNum;
            this.styleOfTransform = `translateX(-${this.currentSlide * 100}%)`;
            this.adjustopacity();
        },

        clickfunction: function(n){
            this.currentSlide = n;
            this.nextSlide();
            this.adjustopacity();
            window.clearInterval(this.intervalId);
            this.intervalId = window.setInterval(this.nextSlide, 5000);
        }
    }
})
</script>

<style>
#cont{
    background-color:#f0f3f5;
}
#cont > div{
    background-color: white;
    position: relative;
    overflow:hidden;
}
#cont .album{
    position: relative;
}

#cont .scroll{
    width:100%;
    height:480px;
    display: flex;
    transition: transform 2s ease;
}
#cont .scroll > div{
    flex: 0 0 100%;
    height: 480px;
    overflow: hidden;
}
#cont .scroll img{
    width:100%;
    height: 100%;

}
#cont .dot{
    position: absolute;
    bottom:10px;
    left:50%;
    transform: translateX(-50%);
}

#cont .dot span{
    display: inline-block;
    width:20px;
    height:20px;
    border-radius: 50%;
    background-color: white;
    opacity: 0.6;
    margin-left:10px;
}
#cont .dot span:hover{
    cursor:pointer;
}
#cont .dot span:first-child{
    opacity: 1;
}

#cont .welcome{
    font-size:40px;
    text-align: center;
    margin:10px 10px;
}

#cont .guide{
    display: flex;
    justify-content: space-around;

}
#cont .guide > div{
    flex: 1;
}
.guide .title{
    font-size: 24px;
    color: #58B19F;
    text-align: center;
    margin-bottom: 20px;
    font-weight:bolder;
    border-left:4px solid #58B19F;
}

.guide .intro{
    text-indent: 2em;
    font-size:20px;
    line-height:30px;
    text-align: justify;
}

.guide > div{
    padding: 20px;
}

.guide .module{
    display: grid;
    grid-template-columns: 45% 45%;
    
    grid-column-gap: 20px;
    grid-row-gap:20px;
}

.guide .module > div{
    text-align: center;
    border: 1px #f0f3f5 solid;
    background-color: #f0f3f5;
    border-radius: 20%;
    box-shadow: black;
    padding: 30px 10px;
    color:inherit;
}

.guide .module > div:hover{
    cursor:pointer;
    font-weight:bold;
}

.guide .module img{
    width: 60%;
}
</style>